<template>
  <div id="box" v-loading="loading">
    <!-- 第一行盒子 -->
    <div class="one">
      <div class="one-left">
        <h4 class="title">机构概述</h4>
        <div class="one-left-left">
          <p class="xinxi">{{ organName }}</p>
          <p class="xinxi1">地址：{{ organAddress }}</p>
          <p class="xinxi1">负责人：{{ principal }} {{ phone }}</p>
          <button class="xinxiBtn" @click="dialogVisible=true">查看营业部分布</button>
        </div>
        <div class="one-left-right">
          <div class="g1">
            <span>分拣中心(个)</span>
            <p class="num"><animate-number :key="sortingCenterNumber" from="0" :to="sortingCenterNumber" class="number" /></p>
          </div>
          <div class="g2">
            <span>营业部(个)</span>
            <p class="num"><animate-number :key="agencyNumber" from="0" :to="agencyNumber" class="number" /></p>
          </div>
          <div class="g3">
            <span>司机人数(个)</span>
            <p class="num"><animate-number :key="driverNumber" from="0" :to="driverNumber" class="number" /></p>
          </div>
          <div class="g4">
            <span>快递员人数(个)</span>
            <p class="num"><animate-number :key="courierNumber" from="0" :to="courierNumber" class="number" /></p>
          </div>
        </div>
      </div>
      <div class="one-right">
        <h4 class="title">今日数据</h4>
        <div class="date">
          <i class="el-icon-refresh" @click="updateTime" />&nbsp;<span>{{ currentTime }}</span>
        </div>
        <div class="yuan">
          <p class="todayData rowOne">订单金额(元)</p>
          <p class="todayData num2"> <animate-number :key="orderAmount" from="0" :to="orderAmount" class="number" /> </p>
          <p class="todayData rowThree">较昨日 + <animate-number :key="orderAmountChanges" from="0" :to="orderAmountChanges" class="number" /> ↑</p>
        </div>
        <div class="bi">
          <p class="todayData rowOne">订单数量(笔)</p>
          <p class="todayData num2"><animate-number :key="orderNumber" from="0" :to="orderNumber" class="number" /></p>
          <p class="todayData rowThree">较昨日 + <animate-number :key="orderNumberChanges" from="0" :to="orderNumberChanges" class="number" /> ↑</p>
        </div>
        <div class="ci">
          <p class="todayData rowOne">运输任务(次)</p>
          <p class="todayData num2"><animate-number :key="transportTaskNumber" from="0" :to="transportTaskNumber" class="number" /></p>
          <p class="todayData rowThree">较昨日 + <animate-number :key="transportTaskNumberChanges" from="0" :to="transportTaskNumberChanges" class="number" /> ↑</p>
        </div>
      </div>
    </div>
    <!-- 第二行盒子 -->
    <div class="two">
      <div class="two-left">
        <h4 class="title">待办任务</h4>
        <div class="date">
          <i class="el-icon-refresh" @click="updateTime" />&nbsp;<span>{{ currentTime }}</span>
        </div>
        <div id="echarts1" ref="echarts1" />
        <p id="echarts1P">待取件 <span id="echarts1Num">{{ waitingPickupNumber }}</span></p>
        <div id="echarts2" ref="echarts2" />
        <p id="echarts2P">待派件 <span id="echarts2Num">{{ waitingDispatchNumber }}</span></p>
        <div id="echarts3" ref="echarts3" />
        <p id="echarts3P">未分配运输 <span id="echarts3Num">{{ unassignedTransportTaskNumber }}</span></p>
        <div id="echarts4" ref="echarts4" />
        <p id="echarts4P">超时运输 <span id="echarts4Num">{{ timeoutTransportTaskNumber }}</span></p>
      </div>
      <div class="two-right">
        <div class="date">
          <i class="el-icon-refresh" @click="updateTime" />&nbsp;<span>{{ currentTime }}</span>
        </div>
        <h4 class="title">执行中任务</h4>
        <div id="echarts5" ref="echarts5" />
        <p id="echarts5P">运输中 <span id="echarts5Num">{{ taskInTransitNumber }}</span></p>
        <div id="echarts6" ref="echarts6" />
        <p id="echarts6P">派送中 <span id="echarts6Num">{{ taskInDeliveryNumber }}</span></p>
      </div>
    </div>
    <!-- 第三行盒子 -->
    <div class="three">
      <h4 id="title">常用功能</h4>
      <div class="threeBox" @click="$router.push('/deliveryman')"><p class="threeText"><i class="el-icon-box" /> 快递员管理</p></div>
      <div class="threeBox" @click="$router.push('/transportTask')"><p class="threeText"><i class="el-icon-truck" /> 运输任务</p></div>
      <div class="threeBox" @click="$router.push('/lineManagement')"><p class="threeText"><i class="el-icon-map-location" /> 线路管理</p></div>
      <div class="threeBox" @click="$router.push('/carType')"><p class="threeText"><i class="el-icon-bicycle" /> 车辆管理</p></div>
      <div class="threeBox" @click="$router.push('/driver')"><p class="threeText"><i class="el-icon-user" /> 司机管理</p></div>
      <div class="threeBox" @click="$router.push('/transportFee')"><p class="threeText"><i class="el-icon-shopping-cart-full" /> 运费查询</p></div>
    </div>
    <!-- 第四行盒子 -->
    <div class="four">
      <div class="four-left">
        <h4 class="title">线路管理</h4>
        <div ref="echarts7" class="mapBox" />
      </div>
      <div class="four-right">
        <h4 class="title">运输任务</h4>
        <div class="date" @click="$router.push('/transportTask')">
          <span>查看更多 <i class="el-icon-arrow-right" /></span>
        </div>
        <el-table ref="table" :data="tableData" stripe style="width: 100%" height="70%" class="swiper-page-table">
          <el-table-column prop="id" label="任务编号" />
          <el-table-column prop="startAgency" label="起始地" />
          <el-table-column prop="endAgency" label="目的地" />
          <el-table-column prop="licensePlate" label="车辆" />
          <el-table-column prop="status" label="任务状态">
            <template v-slot="{ row }">
              <span>{{ row.status === 1 ? "待执行" : row.status === 2 ? "进行中" : row.status === 3 ? "待确认" : row.status === 4 ? "已完成" : row.status === 5 ? "已取消" : "无" }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 第五行盒子 -->
    <div class="five">
      <div class="five-left">
        <h4 class="title">订单总量</h4>
        <p class="unit">单位：笔</p>
        <div class="date">
          <span>{{ dateTime[0] }} - {{ dateTime[dateTime.length-1] }}</span>
        </div>
        <div class="fiveData">
          <div>
            <p class="fiveDataNum1">{{ orderMaxNumber }}</p>
            <span class="fiveDataNum2">订单最高值</span>
          </div>
          <div>
            <p class="fiveDataNum1">{{ orderAverageNumber }}</p>
            <span class="fiveDataNum2">订单平均值</span>
          </div>
          <div>
            <p class="fiveDataNum1">{{ orderMinNumber }}</p>
            <span class="fiveDataNum2">订单最低值</span>
          </div>
        </div>
        <div id="echarts8" ref="echarts8" />
      </div>
      <div class="five-right">
        <h4 class="title">订单分布</h4>
        <div class="date">
          <span>{{ dateTime[0] }} - {{ dateTime[dateTime.length-1] }}</span>
        </div>
        <div id="echarts9" ref="echarts9" />
      </div>
    </div>
    <div class="zhu"><p>注：工作台展示数据为虚拟数据</p></div>
    <div class="jiangsu"><p>江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2022 All Rights Reserved 苏ICP备16007882号-11</p></div>
    <el-dialog
      :visible.sync="dialogVisible"
    >
      <img class="imgMap" src="https://slwl-admin.itheima.net/static/img/department_map.7a0c7499.png">
    </el-dialog>
  </div>
</template>

<script>
import { getWorkBenchDataAPI } from '@/api/workbench'
import geoJson from '@/utils/china.json'
import * as echarts from 'echarts' // echarts图表
echarts.registerMap('china', geoJson)
import 'echarts-liquidfill' // 液体球图表
export default {
  data() {
    return {
      loading: true,
      test: {},
      currentTime: null,
      // 第一行左侧数据
      agencyNumber: '', // 营业部个数
      courierNumber: '', // 快递员人数
      driverNumber: '', // 司机人数
      organAddress: '', // 地址
      organName: '', // 分拣中心名称
      phone: '', // 手机号
      principal: '', // 负责人
      sortingCenterNumber: '', // 分拣中心个数
      dialogVisible: false,
      // 第一行右侧数据
      orderAmount: '', // 订单金额
      orderAmountChanges: '', // 订单金额较昨日
      orderNumber: '', // 订单数量
      orderNumberChanges: '', // 订单数量较昨日
      transportTaskNumber: '', // 运输任务次数
      transportTaskNumberChanges: '', // 运输任务次数较昨日
      // 第二行左侧数据
      timeoutTransportTaskNumber: 0, // 超时运输任务数量
      timeoutTransportTaskRate: 0, // 超时运输任务比率
      unassignedTransportTaskNumber: 0, // 未分配运输任务数量
      unassignedTransportTaskRate: 0, // 未分配运输任务比率
      waitingDispatchNumber: 0, // 待派送数量
      waitingDispatchRate: 0, // 待派送任务比率
      waitingPickupNumber: 0, // 待取件数量
      waitingPickupRate: 0, // 待取件任务比率
      // 第二行右侧数据
      taskInDeliveryNumber: 0, // 派送中任务数量
      taskInDeliveryRate: 0, // 派送中任务比率
      taskInTransitNumber: 0, // 运输中任务数量
      taskInTransitRate: 0, // 运输中任务比率
      provinceInfo: [
        {
          name: '北京',
          oredrNum: 599, // 订单数量
          goodsNum: 599 // 货品数量
        },
        {
          name: '上海',
          oredrNum: 142, // 订单数量
          goodsNum: 599 // 货品数量
        },
        {
          name: '黑龙江',
          oredrNum: 44, // 订单数量
          goodsNum: 599 // 货品数量
        },
        {
          name: '深圳',
          oredrNum: 92, // 订单数量
          goodsNum: 599 // 货品数量
        },
        {
          name: '湖北',
          oredrNum: 810, // 订单数量
          goodsNum: 599 // 货品数量
        },
        {
          name: '四川',
          oredrNum: 453, // 订单数量
          goodsNum: 599 // 货品数量
        },
        {
          name: '新疆',
          oredrNum: 36, // 订单数量
          goodsNum: 31 // 货品数量
        },
        {
          name: '福建',
          oredrNum: 106, // 订单数量
          goodsNum: 30211111 // 货品数量
        }
      ],
      // 第四行右侧数据
      tableData: [{
        endAgency: '', // 目的机构
        id: 0, // 运输任务id
        licensePlate: '', // 车牌号码
        startAgency: '', // 起始机构
        status: 1 // 任务状态
      }],
      // 第五行左侧数据
      orderMaxNumber: 0, // 订单最高值
      orderAverageNumber: 0, // 订单平均值
      orderMinNumber: 0, // 订单最低值
      dateTime: [],
      orderNumber2: []
    }
  },
  watch: {
    test() {
      // 绘制图表
      this.myChart1.setOption({
        graphic: [{
          type: 'group',
          left: 'center',
          top: '20%',
          children: [{
            type: 'text',
            z: 100,
            left: '10',
            top: 'middle'
          }]
        }],
        series: [{
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '50%'],
          //  shape: 'roundRect',
          data: [this.waitingPickupRate / 100],
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              // 背景颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(255,229,224)'
              }],
              globalCoord: false
            }
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 20,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 边框颜色
                colorStops: [{
                  offset: 1,
                  color: 'rgba(227, 93, 62, 0)'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#fff'
            }
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              // 水波纹颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(227, 93, 62)'
              }],
              globalCoord: false
            }
          },
          label: {
            show: true,
            formatter: this.waitingPickupRate + '%',
            fontSize: 24,
            color: '#000'
          },
          animaitonDuration: 1000
        }
        ]
      })
      this.myChart2.setOption({
        graphic: [{
          type: 'group',
          left: 'center',
          top: '20%',
          children: [{
            type: 'text',
            z: 100,
            left: '10',
            top: 'middle'
          }]
        }],
        series: [{
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '50%'],
          //  shape: 'roundRect',
          data: [this.waitingDispatchRate / 100],
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              // 背景颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(255,241,217)'
              }],
              globalCoord: false
            }
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 20,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 边框颜色
                colorStops: [{
                  offset: 1,
                  color: 'rgba(227, 93, 62, 0)'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#fff'
            }
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              // 水波纹颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(255, 196, 94)'
              }],
              globalCoord: false
            }
          },
          label: {
            show: true,
            formatter: this.waitingDispatchRate + '%',
            fontSize: 24,
            color: '#000'
          }
        }
        ]
      })
      this.myChart3.setOption({
        graphic: [{
          type: 'group',
          left: 'center',
          top: '20%',
          children: [{
            type: 'text',
            z: 100,
            left: '10',
            top: 'middle'
          }]
        }],
        series: [{
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '50%'],
          //  shape: 'roundRect',
          data: [this.unassignedTransportTaskRate / 100],
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              // 背景颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(255,234,215)'
              }],
              globalCoord: false
            }
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 20,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 边框颜色
                colorStops: [{
                  offset: 1,
                  color: 'rgba(227, 93, 62, 0)'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#fff'
            }
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              // 水波纹颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(255, 155, 65)'
              }],
              globalCoord: false
            }
          },
          label: {
            show: true,
            formatter: this.unassignedTransportTaskRate + '%',
            fontSize: 24,
            color: '#000'
          }
        }
        ]
      })
      this.myChart4.setOption({
        graphic: [{
          type: 'group',
          left: 'center',
          top: '20%',
          children: [{
            type: 'text',
            z: 100,
            left: '10',
            top: 'middle'
          }]
        }],
        series: [{
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '50%'],
          //  shape: 'roundRect',
          data: [this.timeoutTransportTaskRate / 100],
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              // 背景颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(250,250,222)'
              }],
              globalCoord: false
            }
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 20,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 边框颜色
                colorStops: [{
                  offset: 1,
                  color: 'rgba(227, 93, 62, 0)'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#fff'
            }
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              // 水波纹颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(237, 222, 131)'
              }],
              globalCoord: false
            }
          },
          label: {
            show: true,
            formatter: this.timeoutTransportTaskRate + '%',
            fontSize: 24,
            color: '#000'
          }
        }
        ]
      })
      this.myChart5.setOption({
        graphic: [{
          type: 'group',
          left: 'center',
          top: '20%',
          children: [{
            type: 'text',
            z: 100,
            left: '10',
            top: 'middle'
          }]
        }],
        series: [{
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '50%'],
          //  shape: 'roundRect',
          data: [this.taskInTransitRate / 100],
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              // 背景颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(255,229,224)'
              }],
              globalCoord: false
            }
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 20,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 边框颜色
                colorStops: [{
                  offset: 1,
                  color: 'rgba(227, 93, 62, 0)'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#fff'
            }
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              // 水波纹颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(227, 93, 62)'
              }],
              globalCoord: false
            }
          },
          label: {
            show: true,
            formatter: this.taskInTransitRate + '%',
            fontSize: 24,
            color: '#000'
          }
        }
        ]
      })
      this.myChart6.setOption({
        graphic: [{
          type: 'group',
          left: 'center',
          top: '20%',
          children: [{
            type: 'text',
            z: 100,
            left: '10',
            top: 'middle'
          }]
        }],
        series: [{
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '50%'],
          //  shape: 'roundRect',
          data: [this.taskInDeliveryRate / 100],
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              // 背景颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(250,250,222)'
              }],
              globalCoord: false
            }
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 20,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 边框颜色
                colorStops: [{
                  offset: 1,
                  color: 'rgba(227, 93, 62, 0)'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#fff'
            }
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              // 水波纹颜色
              colorStops: [{
                offset: 1,
                color: 'rgb(237, 222, 131)'
              }],
              globalCoord: false
            }
          },
          label: {
            show: true,
            formatter: this.taskInDeliveryRate + '%',
            fontSize: 24,
            color: '#000'
          }
        }
        ]
      })
      this.myChart7.setOption({
        // 进行相关配置
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          backgroundColor: 'rgba(0,0,0,0.5)', // 提示框背景色
          borderColor: 'rgba(0,0,0,0)', // 边框夜色
          textStyle: {
            color: 'rgba(255, 255, 255, 1)'// 文字颜色
          },
          // 自定义提示框自动调用函数
          formatter: function(params) {
            const showname = params
            return (
              `
              <div style='width:100%;height:60px'>
                <p style="font-size:12px" >${showname.data ? showname.data.name : '暂无信息'}</p>
                <p style="font-size:12px" >订单总数:${showname.data ? showname.data.oredrNum : '暂无信息'}</p>
                <p style="font-size:12px">货品数量:${showname.data ? showname.data.goodsNum : '暂无信息'}</p>
              </div>
              `
            )
          }
        },
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['#fd7b78']
        },
        geo: {
          // 这个是重点配置区
          map: 'china', // 表示中国地图
          // roam: true, //是否允许放大
          label: {
            normal: {
              show: false, // 是否显示对应地名
              textStyle: {
                color: '#fd7b88' // 对应地名颜色
              }
            }
          },
          // 点击变色
          select: {
            itemStyle: {
              areaColor: '#fd7b88' // 点击之后的省份颜色
            }
          },
          itemStyle: {
            normal: {
              // 正常状态下的地图背景色
              borderColor: '#fff',
              borderWidth: '0.5',
              color: new echarts.graphic.LinearGradient( // 渐变色
                0,
                0,
                1,
                0, // 渐变色的起止位置, 右/下/左/上
                [
                  // offset 位置
                  { offset: 0.8, color: '#f2aca0' },
                  { offset: 0, color: '#fd7b78' }
                ]
              )
            },
            emphasis: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20, // 聚焦时候的阴影范围
              shadowColor: '#f04b30', // 聚焦时候的阴影颜色
              // 鼠标放上去地图区域背景颜色
              areaColor: '#fd7b78', // 聚焦之后的颜色
              borderWidth: 0
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
          {
            // name: "启动次数", // 浮动框的标题
            type: 'map',
            geoIndex: 0,
            data: this.provinceInfo
          }
        ]
      })
      this.myChart8.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateTime
        },
        yAxis: {
          type: 'value'
        },
        color: ['pink'],
        series: [
          {
            data: this.orderNumber2,
            type: 'line',
            areaStyle: {}
          }
        ]
      })
      this.myChart9.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: [
            '广东',
            '山东',
            '江苏',
            '浙江',
            '河南',
            '四川',
            '湖北',
            '台湾',
            '福建',
            '湖南',
            '上海',
            '安徽',
            '河北',
            '北京',
            '陕西',
            '江西',
            '重庆',
            '辽宁',
            '云南',
            '广西',
            '香港',
            '山西',
            '内蒙古',
            '贵州',
            '新疆',
            '天津',
            '黑龙江',
            '吉林',
            '甘肃',
            '海南',
            '宁夏',
            '青海',
            '西藏',
            '澳门'
          ]
        },
        series: [
          {
            type: 'bar',
            data: [0, 500, 1000, 1500, 2000, 2500, 0, 500, 1000, 1500, 2000, 2500, 0, 500, 1000, 1500, 2000, 2500, 500, 1000, 1500, 2000, 2000, 500, 1000, 1500, 2000, 2500]
          }
        ]
      })
    }
  },
  mounted() {
    this.myChart1 = echarts.init(this.$refs.echarts1)
    this.myChart2 = echarts.init(this.$refs.echarts2)
    this.myChart3 = echarts.init(this.$refs.echarts3)
    this.myChart4 = echarts.init(this.$refs.echarts4)
    this.myChart5 = echarts.init(this.$refs.echarts5)
    this.myChart6 = echarts.init(this.$refs.echarts6)
    this.myChart7 = echarts.init(this.$refs.echarts7)
    this.myChart8 = echarts.init(this.$refs.echarts8)
    this.myChart9 = echarts.init(this.$refs.echarts9)
    this.drawCharts()
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.table
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
        // 重置table距离顶部距离
        divData.scrollTop = 0
      }
    }, 30)
  },
  created() {
    this.updateTime()
    this.getWorkBenchData()
  },
  methods: {
    updateTime() {
      const newTime = new Date().toLocaleString()
      this.currentTime = newTime
    },
    // 获取工作台数据
    async getWorkBenchData() {
      const result = await getWorkBenchDataAPI()
      this.loading = false
      console.log(result)
      // 第一行左侧数据
      this.agencyNumber = result.data.data.organOverview.agencyNumber // 营业部个数
      this.courierNumber = result.data.data.organOverview.courierNumber // 快递员人数
      this.driverNumber = result.data.data.organOverview.driverNumber // 司机人数
      this.organAddress = result.data.data.organOverview.organAddress // 地址
      this.organName = result.data.data.organOverview.organName // 分拣中心名称
      this.phone = result.data.data.organOverview.phone // 手机号
      this.principal = result.data.data.organOverview.principal // 负责人
      this.sortingCenterNumber = result.data.data.organOverview.sortingCenterNumber // 分拣中心个数
      // 第一行右侧数据
      this.orderAmount = result.data.data.todayData.orderAmount // 订单金额
      this.orderAmountChanges = result.data.data.todayData.orderAmountChanges // 订单金额较昨日
      this.orderNumber = result.data.data.todayData.orderNumber // 订单数量
      this.orderNumberChanges = result.data.data.todayData.orderNumberChanges // 订单数量较昨日
      this.transportTaskNumber = result.data.data.todayData.transportTaskNumber // 运输任务次数
      this.transportTaskNumberChanges = result.data.data.todayData.transportTaskNumberChanges // 运输任务次数较昨日
      // 第二行左侧数据
      this.test = result.data.data.backlog
      this.timeoutTransportTaskNumber = result.data.data.backlog.timeoutTransportTaskNumber // 超时运输任务数量
      this.timeoutTransportTaskRate = result.data.data.backlog.timeoutTransportTaskRate // 超时运输任务比率
      this.unassignedTransportTaskNumber = result.data.data.backlog.unassignedTransportTaskNumber // 未分配运输任务数量
      this.unassignedTransportTaskRate = result.data.data.backlog.unassignedTransportTaskRate // 未分配运输任务比率
      this.waitingDispatchNumber = result.data.data.backlog.waitingDispatchNumber // 待派送数量
      this.waitingDispatchRate = result.data.data.backlog.waitingDispatchRate // 待派送任务比率
      this.waitingPickupNumber = result.data.data.backlog.waitingPickupNumber // 待取件数量
      this.waitingPickupRate = result.data.data.backlog.waitingPickupRate // 待取件任务比率
      // 第二行右侧数据
      this.taskInDeliveryNumber = result.data.data.todayData.taskInDeliveryNumber // 派送中任务数量
      this.taskInDeliveryRate = result.data.data.todayData.taskInDeliveryRate // 派送中任务比率
      this.taskInTransitNumber = result.data.data.todayData.taskInTransitNumber // 运输中任务数量
      this.taskInTransitRate = result.data.data.todayData.taskInTransitRate // 运输中任务比率
      // 第四行右侧数据
      this.tableData = result.data.data.transportTaskList
      // 第五行左侧数据
      this.orderMaxNumber = result.data.data.orderLineChart.orderMaxNumber
      this.orderAverageNumber = result.data.data.orderLineChart.orderAverageNumber
      this.orderMinNumber = result.data.data.orderLineChart.orderMinNumber
      this.dateTime = result.data.data.orderLineChart.monthlyOrderList.map(e => e.dateTime)
      this.orderNumber2 = result.data.data.orderLineChart.monthlyOrderList.map(e => e.orderNumber)
    },
    drawCharts() {
      // 基于准备好的dom，初始化echarts实例
      window.onresize = this.myChart7.resize // 窗口或框架被调整大小时执行chinaMap.resize
      this.myChart7.setOption({
        // 进行相关配置
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          backgroundColor: 'rgba(0,0,0,0.5)', // 提示框背景色
          borderColor: 'rgba(0,0,0,0)', // 边框夜色
          textStyle: {
            color: 'rgba(255, 255, 255, 1)'// 文字颜色
          },
          // 自定义提示框自动调用函数
          formatter: function(params) {
            const showname = params
            return (
              `
              <div style='width:100%;height:60px'>
                <p style="font-size:12px" >${showname.data ? showname.data.name : '暂无信息'}</p>
                <p style="font-size:12px" >订单总数:${showname.data ? showname.data.oredrNum : '暂无信息'}</p>
                <p style="font-size:12px">货品数量:${showname.data ? showname.data.goodsNum : '暂无信息'}</p>
              </div>
              `
            )
          }
        },
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['#fd7b78']
        },
        geo: {
          // 这个是重点配置区
          map: 'china', // 表示中国地图
          // roam: true, //是否允许放大
          label: {
            normal: {
              show: false, // 是否显示对应地名
              textStyle: {
                color: '#fd7b88' // 对应地名颜色
              }
            }
          },
          // 点击变色
          select: {
            itemStyle: {
              areaColor: '#fd7b88' // 点击之后的省份颜色
            }
          },
          itemStyle: {
            normal: {
              // 正常状态下的地图背景色
              borderColor: '#fff',
              borderWidth: '0.5',
              color: new echarts.graphic.LinearGradient( // 渐变色
                0,
                0,
                1,
                0, // 渐变色的起止位置, 右/下/左/上
                [
                  // offset 位置
                  { offset: 0.8, color: '#f2aca0' },
                  { offset: 0, color: '#fd7b78' }
                ]
              )
            },
            emphasis: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20, // 聚焦时候的阴影范围
              shadowColor: '#f04b30', // 聚焦时候的阴影颜色
              // 鼠标放上去地图区域背景颜色
              areaColor: '#fd7b78', // 聚焦之后的颜色
              borderWidth: 0
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
          {
            // name: "启动次数", // 浮动框的标题
            type: 'map',
            geoIndex: 0,
            data: this.provinceInfo
          }
        ]
      })
      // 地图打点
      // const cityData = [
      //   {
      //     name: '北京',
      //     oredrNum: 599, // 订单数量
      //     goodsNum: 599 // 货品数量
      //   },
      //   {
      //     name: '天津',
      //     ename: '天津'
      //   },
      //   {
      //     name: '上海',
      //     oredrNum: 142,
      //     goodsNum: 599
      //   },
      //   {
      //     name: '重庆',
      //     ename: '重庆'
      //   },
      //   {
      //     name: '河北',
      //     ename: '河北'
      //   },
      //   {
      //     name: '河南',
      //     ename: '河南'
      //   },
      //   {
      //     name: '云南',
      //     ename: '云南'
      //   },
      //   {
      //     name: '辽宁',
      //     ename: '辽宁'
      //   },
      //   {
      //     name: '黑龙江',
      //     oredrNum: 44,
      //     goodsNum: 599
      //   },
      //   {
      //     name: '湖南',
      //     ename: '湖南'
      //   },
      //   {
      //     name: '安徽',
      //     ename: '安徽'
      //   },
      //   {
      //     name: '山东',
      //     ename: '山东'
      //   },
      //   {
      //     name: '新疆',
      //     oredrNum: 1, // 订单数量
      //     goodsNum: 599, // 货品数量
      //     ename: '新疆'
      //   },
      //   {
      //     name: '江苏',
      //     ename: '江苏'
      //   },
      //   {
      //     name: '浙江',
      //     value: 3,
      //     ename: '浙江'
      //   },
      //   {
      //     name: '江西',
      //     ename: '江西'
      //   },
      //   {
      //     name: '湖北',
      //     oredrNum: 810,
      //     goodsNum: 599
      //   },
      //   {
      //     name: '广西',
      //     ename: '广西'
      //   },
      //   {
      //     name: '甘肃',
      //     ename: '甘肃'
      //   },
      //   {
      //     name: '山西',
      //     ename: '山西'
      //   },
      //   {
      //     name: '内蒙古',
      //     ename: '内蒙古'
      //   },
      //   {
      //     name: '陕西',
      //     ename: '陕西'
      //   },
      //   {
      //     name: '吉林',
      //     ename: '吉林'
      //   },
      //   {
      //     name: '福建',
      //     oredrNum: 106,
      //     goodsNum: 30211111
      //   },
      //   {
      //     name: '贵州',
      //     ename: '贵州'
      //   },
      //   {
      //     name: '广东',
      //     value: 53,
      //     ename: '广东'
      //   },
      //   {
      //     name: '青海',
      //     ename: '青海'
      //   },
      //   {
      //     name: '西藏',
      //     ename: '西藏'
      //   },
      //   {
      //     name: '四川',
      //     oredrNum: 453,
      //     goodsNum: 599
      //   },
      //   {
      //     name: '宁夏',
      //     ename: '宁夏'
      //   },
      //   {
      //     name: '海南',
      //     ename: '海南'
      //   },
      //   {
      //     name: '台湾',
      //     ename: '台湾'
      //   },
      //   {
      //     name: '香港',
      //     ename: '香港'
      //   },
      //   {
      //     name: '澳门',
      //     ename: '澳门'
      //   }
      // ]
      // const geoCoordMap = {
      //   广东: [113.75, 23.04],
      //   黑龙江: [128.34, 47.05],
      //   北京: [116.40, 40.40],
      //   新疆: [86.61, 40.79],
      //   内蒙古: [112.17, 42.81],
      //   青海: [97.07, 35.62],
      //   西藏: [89.13, 30.66]
      // }
      // this.convertData = (data) => {
      //   const res = []
      //   for (let i = 0; i < data.length; i++) {
      //     const geoCoord = geoCoordMap[data[i].name]
      //     if (geoCoord) {
      //       res.push({
      //         name: data[i].name,
      //         value: geoCoord.concat(data[i].value), // 将上面数组的value添加到经纬度后面
      //         oredrNum: data[i].oredrNum ? data[i].oredrNum : '暂无数据',
      //         goodsNum: data[i].goodsNum ? data[i].goodsNum : '暂无数据'
      //       })
      //     }
      //   }
      //   return res
      // }
      // this.getMapChart(cityData)
    },
    // 处理涟漪特效的函数
    getMapChart(data) {
      const myChart = this.echarts.init(this.$refs.echarts7)
      const option = {
        tooltip: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'effectScatter', // 图例类型
            coordinateSystem: 'geo', // 使用geo地图
            symbol: 'image://', // 图例样式
            // symbol: "image://",//图例样式
            showEffectOn: 'emphasis', // 涟漪特效何时触发
            symbolSize: 20, // 图例大小,
            symbolOffset: [0, -10],
            rippleEffect: { // 特效设置
              scale: 2.5,
              color: 'rgba(207, 55, 55, 1)',
              number: 3
            },
            // eslint-disable-next-line no-dupe-keys
            showEffectOn: 'render',
            data: this.convertData(data)
          }
        ]
      }
      myChart.on('click', (params) => {
      })
      myChart.setOption(option)
      window.onresize = () => {
        myChart.resize()
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
/* 大盒子 */
#box{
  padding: 16px;
  background-color: rgb(243, 244, 247);
}
.title{
  margin-left: 20px;
  margin-top: 20px;
}
/* 第一行盒子 */
.one{
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.one-left{
  width: 59.5%;
  height: 100%;
  background-color: #fff;
  display: flex;
  position: relative;
}
.one-right{
  width: 39.5%;
  height: 100%;
  background-color: #fff;
  display: flex;
  position: relative;
}
.date{
  position: absolute;
  right: 2%;
  top: 4%;
  font-size: 12px;
  color: #9e9e9e;
}
.todayData{
  margin-bottom: 26px;
}
.num2{
  font-size: 36px;
  color: #333;
  font-weight: 700;
}
.yuan{
  position: absolute;
  left: 12%;
  top: 30%;
}
.bi{
  position: absolute;
  left: 42%;
  top: 30%;
}
.ci{
  position: absolute;
  left: 70%;
  top: 30%;
}
.rowOne{
  font-size: 14px;
}
.rowThree{
  font-size: 13px;
  color: #9e9e9e;
}
.one-left-left{
  display: flex;
  flex-direction: column;
  height: 70%;
  position: absolute;
  left: 4%;
  top: 18%;
  width: 38%;
  border-right: 1px solid #9e9e9e;
}
.one-left-right{
  width: 450px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 4%;
  top: 35%;
}
.num{
  font-size: 36px;
  font-weight: 700;
  color: rgb(225, 85, 54);
  margin-top: 16px;
}
.xinxi{
  margin-top: 20px;
}
.xinxi1{
  margin-top: 20px;
  font-size: 14px;
  color: #9e9e9e;
}
.xinxiBtn{
  margin-top: 20px;
  width: 150px;
  height: 40px;
  color: rgb(225, 85, 54);
  font-size: 14px;
  border: 1px solid rgb(225, 85, 54);
  background-color: rgb(255, 238, 235);
  border-radius: 5px;
}
.xinxiBtn:hover{
  background-color: rgb(255, 107, 74);
  color: #fff;
}
/* 第二行盒子 */
.two{
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.two-left{
  width: 59.5%;
  height: 100%;
  background-color: #fff;
  display: flex;
  position: relative;
}
.two-right{
  width: 39.5%;
  height: 100%;
  background-color: #fff;
  display: flex;
  position: relative;
}
#echarts1{
  width: 200px;
  height: 220px;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 5%;
}
#echarts1P{
  position: absolute;
  bottom: 15%;
  left: 11%;
  font-weight: 700;
}
#echarts1Num{
  color: rgb(227, 93, 62);
  font-size: 20px;
}
#echarts2{
  width: 200px;
  height: 220px;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 27%;
}
#echarts2P{
  position: absolute;
  bottom: 15%;
  left: 33%;
  font-weight: 700;
}
#echarts2Num{
  color: rgb(255, 196, 94);
  font-size: 20px;
}
#echarts3{
  width: 200px;
  height: 220px;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 50%;
}
#echarts3P{
  position: absolute;
  bottom: 15%;
  left: 55%;
  font-weight: 700;
}
#echarts3Num{
  color: rgb(255, 155, 65);
  font-size: 20px;
}
#echarts4{
  width: 200px;
  height: 220px;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 73.5%;
}
#echarts4P{
  position: absolute;
  bottom: 15%;
  left: 80%;
  font-weight: 700;
}
#echarts4Num{
  color: rgb(237, 222, 131);
  font-size: 20px;
}
#echarts5{
  width: 200px;
  height: 220px;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 15%;
}
#echarts5P{
  position: absolute;
  bottom: 15%;
  left: 25%;
  font-weight: 700;
}
#echarts5Num{
  color: rgb(227, 93, 62);
  font-size: 20px;
}
#echarts6{
  width: 200px;
  height: 220px;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 55%;
}
#echarts6P{
  position: absolute;
  bottom: 15%;
  left: 65%;
  font-weight: 700;
}
#echarts6Num{
  color: rgb(255, 155, 65);
  font-size: 20px;
}
/* 第三行盒子 */
.three{
  width: 100%;
  height: 200px;
  background-color: #fff;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  text-align: center;
}
#title{
  margin-left: 20px;
  margin-top: 20px;
  position: absolute;
}
.threeBox{
  width: 240px;
  height: 120px;
  background-color: rgb(250, 250, 251);
  border-radius: 5px;
  margin-top: 50px;
  font-size: 24px;
}
.threeBox:hover{
  color: rgb(225, 85, 54);
}
.threeText{
  margin-top: 40px;
}
/* 第四行盒子 */
.four{
  width: 100%;
  height: 480px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.four-left{
  width: 49.5%;
  height: 100%;
  background-color: #fff;
}
.mapBox{
  width: 450px;
  height: 450px;
  margin-left: 150px;
}
.four-right{
  width: 49.5%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}
.seamless-warp{
  overflow: hidden;
}
.swiper-page-table{
  margin-top: 30px;
}
/* 第五行盒子 */
.five{
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: space-between;
}
.five-left{
  width: 49.5%;
  height: 100%;
  background-color: #fff;
  position: relative;
}
.unit{
  font-size: 14px;
  color: #9e9e9e;
  margin-top: 8px;
  margin-left: 20px;
}
.five-right{
  width: 49.5%;
  height: 100%;
  background-color: #fff;
  position: relative;
}
.fiveData{
  margin-top: 60px;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.fiveDataNum1{
  font-size: 32px;
  font-weight: 700;
  color: rgb(225, 85, 54);
  margin-bottom: 14px;
}
.fiveDataNum2{
  font-size: 14px;
  color: #9e9e9e;
}
#echarts8{
  margin: 0 auto;
  width: 800px;
  height: 400px;
}
#echarts9{
  margin: 0 auto;
  width: 800px;
  height: 550px;
}
/* 底部注释 */
.zhu{
  width: 100%;
  font-size: 14px;
  color: #333;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
  margin-top: 20px;
}
.jiangsu{
  background-color: rgb(243, 244, 247);
  text-align: center;
  font-size: 14px;
  color: #9e9e9e;
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 40px;
}
.imgMap{
  width: 100%;
  height: 100%;
}
</style>
